<!-- 商品分类 -->
<template>
	<view class="container">
		<text class="title">商品分类</text>
		<view class="list">
			<view class="list-item" @click="handleNavTo('/pagesB-goods-manage/add-goods-category/index')">
				<text class="label">选择商品分类</text>
				<text class="iconfont">&#xe61a;</text>
			</view>
			<view class="content">
				<view class="pictures">
					<button class="camera iconfont btn-transition-scale95">&#xe617;</button>
				</view>
				<text class="text">处于监管要求，经营该类目下的商品，需要审核农药经营许可证</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const handleNavTo = (url) => {
		uni.navigateTo({
			url
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 26rpx 25rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			padding-left: 4rpx;
		}
	}

	.list {
		background-color: white;
		border-radius: 20rpx;
		padding-left: 30rpx;
		margin-top: 26rpx;

		&-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			padding-right: 20rpx;
			border-bottom: 1rpx solid #F3F3F3;

			.label {
				flex-grow: 1;
				font-size: 28rpx;
				color: #222222;
			}

			.iconfont {
				flex-shrink: 0;
				font-size: 28rpx;
				color: #222222;
			}
		}

		.content {
			padding: 30rpx 0 50rpx;

			.pictures {
				.pic {
					width: 136rpx;
					height: 136rpx;
					border-radius: 10rpx;
				}

				.camera {
					width: 136rpx;
					height: 136rpx;
					font-size: 60rpx;
					color: #60646F;
					text-align: center;
					line-height: 136rpx;
					background: #F5F4F5;
					border-radius: 10rpx;
				}
			}

			.text {
				display: block;
				width: 600rpx;
				font-size: 24rpx;
				color: #999;
				margin-top: 30rpx;
			}
		}
	}
</style>